<template>
  <div class="weather-info">
    <div class="location">
      {{ location }}
    </div>
    <div class="temperature">
      <span class="degree">{{ temperature }}°</span>
      <span class="condition">{{ condition }}</span>
    </div>
    <div class="details">
      <span>风力: {{ windSpeed }} 级</span>
      <span>湿度: {{ humidity }}%</span>
    </div>
    <div class="timestamp">
      {{ timestamp }}
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WeatherInfo',
    props: {
      location: {
        type: String,
        required: true
      },
      temperature: {
        type: Number,
        required: true
      },
      condition: {
        type: String,
        required: true
      },
      windSpeed: {
        type: Number,
        required: true
      },
      humidity: {
        type: Number,
        required: true
      },
      timestamp: {
        type: String,
        required: true
      }
    }
  };
</script>

<style scoped>
.weather-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('@/static/images/home/weather.png'); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 10px; /* 减少内边距 */
  height: 150px; /* 明确设定容器高度 */
  box-sizing: border-box; /* 确保 padding 和 border 不会增加元素尺寸 */
  margin-top: 4rpx;
}

.location {
  font-size: 14px; /* 减小字体大小 */
  margin-bottom: 5px; /* 减少外边距 */
}

.temperature {
  font-size: 36px; /* 减小字体大小 */
  margin-bottom: 5px; /* 减少外边距 */
  display: flex;
  align-items: center;
  line-height: 1; /* 设置紧凑的行高 */
}

.degree {
  font-weight: bold;
  margin-right: 3px; /* 减少右边距 */
}

.condition {
  font-size: 12px; /* 减小字体大小 */
}

.details {
  font-size: 12px; /* 减小字体大小 */
  margin-bottom: 5px; /* 减少外边距 */
  line-height: 1.2; /* 设置紧凑的行高 */
}

.timestamp {
  font-size: 12px; /* 减小字体大小 */
  text-align: right;
  margin-top: auto; /* 将时间戳推到最底部 */
}
</style>
